<!DOCTYPE html>
<html>
	<head>
		
		<title>Surface Water Mapping Tool</title>
		
		<!-- meta data -->
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="author" content="">
		
		<!-- Google JavaScript loader tool (for the Maps, Charts APIs) -->
		<script src="https://www.google.com/jsapi"></script>
		
		<!-- Google Web Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
		
		<!-- Favicon -->
		<link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
		
		<!-- Third-party JavaScript -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBInHwppL3GVDOj7SEq6Li610cSBc7YJJo&v=3.exp&libraries=drawing,geometry,places"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/bootstrap-slider.min.js"></script>
		
		<!-- Third-party CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/css/bootstrap-slider.min.css">

		<!-- Load custom JavaScript and stylesheet(s) -->
		<link rel="stylesheet" href="static/main.css">
		<script src="/static/script.js"></script>
		<script src="/static/ee_api_js.js"></script>
		
	</head>
	<body>
		
		<!-- Page header -->	
		<section id="pageheader">	
			<!-- Logos -->
			<div class="logos">
			   <a href="https://www.usaid.gov/" target="_blank"><img id="usaid" src="static/images/usaid.png" alt="USAID">
			   <a href="https://www.nasa.gov/" target="_blank"><img id="nasa" src="static/images/nasa.png" alt="NASA"></a>
			   <a href="http://www.adpc.net" target="_blank"><img id="adpc" src="static/images/adpclogo.jpg" alt="ADPC"></a> 
			   <a href="http://servir.adpc.net/" target="_blank"><img id="servir" src="static/images/servir.png" alt="SERVIR"></a> 
			</div>
		
			<!-- Navigation bar -->
			<nav>
				<ul>
					<li><button id="homebutton">Home</li>
					<li><button id="examplesbutton">Examples</li>
					<li><button id="aboutbutton">About</li>
					<li><a id="feedbacklink" href="https://docs.google.com/a/sig-gis.com/forms/d/1pOgXeWJaDWg8NlC-ZalZJTzUdv9sVjNdXibZVPo4l4I/edit?ts=57ec6a52" target="_blank">Feedback</a></li>
				</ul>
				<script>
				$(document).ready(function(){
					$("#homebutton").click(function () {
						$(".map").css("display", "block");
						$(".ui").css("display", "block");
						$(".legend").css("display", "block");
						$("#examples").css("display", "none");
						$("#about").css("display", "none");
						$("#searchbox").css("display", "block");
					});
				});
				$(document).ready(function(){
					$("#examplesbutton").click(function () {
						$(".map").css("display", "none");
						$(".ui").css("display", "none");
						$(".legend").css("display", "none");
						$("#about").css("display", "none");
						$("#examples").css("display", "block");
						$("#searchbox").css("display", "none");
					});
				});
				$(document).ready(function(){
					$("#aboutbutton").click(function () {
						$(".map").css("display", "none");
						$(".ui").css("display", "none");
						$(".legend").css("display", "none");
						$("#examples").css("display", "none");
						$("#about").css("display", "block");
						$("#searchbox").css("display", "none");
					});
				});
				</script>
				
				<!-- Search box -->
				<input id="searchbox" type="text" placeholder="Search for a location">
				
			</nav>
			
		</section>

		<!-- Page content -->
	    <section id="pagecontent">
			
			<!-- Examples page -->
			<div id="examples">
				<h1>Example applications</h1>
				<p>This page shows a few potential applications for which the Surface Water Mapping Tool could be used, by loading a pre-calculated map in the
				tool. These maps only cover the area of interest of each specific example to keep storage and loading times to a minimum. The input parameters
				are also updated to match those used to create the example map. If desired, the tool can then be used to replicate the map and extend it over
				the entire SERVIR-Mekong area. More extensive explanations and examples can be found in the documentation (at the About page).<br><br>
				Click on one of the images below to load an example. If you want to reload the default map that is shown when the application first starts up, 
				<span onClick="load_default()" style="text-decoration:underline;cursor:pointer">click here</span>.</p>
				<script>
				function load_default() {
					$(".map").css("display", "block");
					$(".ui").css("display", "block");
					$(".legend").css("display", "block");
					$("#examples").css("display", "none");
					$("#about").css("display", "none");
					$(".months-slider").hide();
					$("#searchbox").css("display", "block");
					water.App.prototype.setDefaultParams();
					water.App.prototype.loadDefault();
				}
				</script>
				<div class="example_items">
					<div class="example_item" id="example_1">
						<img class="example_img" id="example_1_img" src="static/images/example1.png" onClick="load_example(this.id)">
						<span>
						<b>Permanent and temporary water</b><br>
						The tool is primarily suited to detect permanent and temporary water, in any of its occurrences. Permanent water is water that was
						present for most of the time within the chosen period, and as such is often represented by reservoirs, lakes and rivers. Temporary
						water is water that was only present for a part of the period, and as such is often represented by floods or (seasonally) inundated
						land; wetlands, rice fields, fish ponds, etc.<br>
						The example shows the area around Phnom Penh, Cambodia, in 2013. This was a relatively wet year and therefore both permanent and
						temporary water are being detected in relatively large areas.
						</span>
					</div>
					<div class="example_item" id="example_2">
						<img class="example_img" id="example_2_img" src="static/images/example2.png" onClick="load_example(this.id)">
						<span>
						<b>Reservoirs</b><br>
						Reservoir surface areas can easily be picked up with the tool. By adjusting the time period the user can detect how the extent of a
						reservoir changes over time. This means that it is possible to detect:<br>
						- when a reservoir was constructed (and how this changed the surface water within its region)<br>
						- how reservoir surface area changes over the years (for example, to assess the effect of droughts)<br>
						- the long-term seasonality and/or monthly characteristics of reservoirs (by activating the monthly control option)<br>
						The example shows Shwegyin Reservoir in Myanmar, which was constructed in 2010. The time period has been selected to highlight how
						the reservoir was filling up after construction. Permanent water gives an indication of surface water when the reservoir just started
						filling up, and temporary water gives an indication of the final extent of reservoir in 2011.
						</span>
					</div>
					<div class="example_item" id="example_3">
						<img class="example_img" id="example_3_img" src="static/images/example3.png" onClick="load_example(this.id)">
						<span>
						<b>Floods</b><br>
						As mentioned above, temporary water can be an indication of a flood (although it can also indicate other situations). For this purpose,
						the time period should be selected carefully: it should fully capture the period of the flood, while keeping the time period as short as
						possible. The latter is a challenge, because of the algorithm behind the tool, which requires a sufficient number of satellite images to
						function properly. Therefore, the time period is limited to a three months minimum. This implies that only large scale floods with a
						relatively long duration can be picked up by this tool.<br>
						The example shows the floods around Bangkok in 2011.
						</span>
					</div>
					<div class="example_item" id="example_4">
						<img class="example_img" id="example_4_img" src="static/images/example4.png" onClick="load_example(this.id)">
						<span>
						<b>River morphology / erosion</b><br>
						Permanent water over different time period can show how surface water shifts over time. This can be particularly useful to assess river morphology,
						i.e. how the river course changes over the years. In the tool this could be achieved by selecting multiple time periods, updating the map each time.
						By downloading these maps as well, the user can carry out analyses on the combination of these maps, to really quantitatively assess the characteristics
						of river morphology over a region.<br>
						The example shows a section of the Irrawaddy/Ayeyarwady river in Myanmar over a 10 year period (2008-2017). The multi-year time period gives an
						indication of where water was present during this time, with permanent water showing where the river was stable and temporary water showing where it
						was changing, diverging or meandering.
						</span>
					</div>
					<div class="example_item" id="example_5">
						<img class="example_img" id="example_5_img" src="static/images/example5.png" onClick="load_example(this.id)">
						<span>
						<b>Seasonal inundation</b><br>
						Aside from floods, temporary water is often an indication of seasonal inundation. This can be both natural (wetlands) or human-induced (rice fields).
						This is more easily picked up than floods, because the inundation often lasts longer and as such it is not hindered by the limitation on the time
						period selection. The detection of seasonal inundation can be used to assess:<br>
						- the location and area of rice fields and fish ponds<br>
						- the location and area of wetlands<br>
						- the seasonal characteristics of water bodies<br>
						The example shows Tonlé Sap Lake in Cambodia over the period 1988-2017, with the months slider activated. January is shown by default, but the slider
						can be used to view the other months. Each month represents an analysis done on all satellite images taken only during that month for 1988-2017.
						</span>
					</div>
					<script>
					function load_example(clicked_id) {
						var example_id = 'example_'.concat(clicked_id.split('_')[1]);
						water.App.prototype.loadExample(example_id);
					}
					</script>
				</div>
			</div>
		
			<!-- About page -->
			<div id="about">
				<h1>About the Surface Water Mapping Tool</h1>
				<p>The tool works by merging data from different Landsat satellite missions, providing a dataset that spans from the present day all the
				way back to 1984, which is also continously being updated. A stack of images is created for the time period selected by the user. From this
				stack of images two percentile maps are calculated, which represent two different situations. The higher percentile (with a default value of 40)
				represents the permanent situation; that which was present for the entire selected time period. The lower percentile (default value of 8)
				represents a temporary situation; that which was present only for a short time within the selected time period. From each percentile map a
				water index map is calculated, using the Modified Normalized Difference Water Index (MNDWI) [Xu, 2006]. This index combines several spectral
				bands from the Landsat satellites that are sensitive to the occurrence of water. A threshold value is then applied at the pixel level to classify
				water and non-water. Corrections are applied to improve results, reducing errors associated with falsely classified water over dark vegetation and
				(hill) shadows. Dark vegetation is masked out using the Normalized Difference Vegetation Index (NDVI) and hill shadows are masked out using a
				Height Above Nearest Drainage (HAND) map [Rennó et al., 2008], derived from the Multi-Error-Removed Improved-Terrain (MERIT) Digital Elevation Model
				(DEM) [Yamazaki et al., 2017]. The various steps of the tool are shown in the figure below.</p>
				<img id="workflow_img" src="static/images/workflow.png">
				<p>The resulting water maps are loaded into the web application and displayed on top of the background map. The map calculated from the 40th
				percentile map represents permanent water (within the selected time period) and the map calculated from the 8th percentile map represents
				temporary water. Permanent water mostly represents reservoirs, lakes and rivers (that did not change a lot over the selected time period).
				Temporary water most often represents (seasonally) inundated land, such as wetlands, rice fields or fish ponds. It can also be an indication
				of floods or changes in water bodies.</p>
				<p>The following layers can be visualized using the tool:<br>
				- background <i>(white background that can be used to more clearly see other layers)</i><br>
				- HAND <i>(pre-calculated Height Above Nearest Drainge map)</i><br>
				- water <i>(the final result; permanent and temporary water)</i></p>
				<p>Please note that, due to the statistical nature of this method, the maps are asynchronous in time,
				i.e. not each pixel is covered with water at the same time but these maps are an integration over the selected period.</p>
				<p>Relevant links:<br>
				<a href="https://docs.google.com/document/d/1o7-XUNSVnMLT7VL9a2_7orv7APgiZz1kcPZIFrq9pBE" target="_blank" style="text-decoration:underline">User Guide</a><br>
				<a href="https://docs.google.com/document/d/1ZoICFzjbiS_VpdbHyV1SdBPQdEoa_NfL-tAFLgXN9bw" target="_blank" style="text-decoration:underline">Background and verification</a><br>
				<a href="https://github.com/Servir-Mekong/SurfaceWaterTool" target="_blank" style="text-decoration:underline">GitHub</a>
				</p>
				<hr>
				<h1>Development and Acknowledgement</h1>
				<p>The development of the algorithm using Landsat 8 data was initiated in the PhD research of Gennadii Donchyts (co-funded by Deltares
				and the Technical University of Delft). Testing and further development of the algorithm using the Murray-Darling basin in Australia was
				funded by the EC FP7 project eartH2Observe (under grant agreement No 603608), which led to the publication of Donchyts et al. (2016), see below.</p>
				<p>Application to the Mekong basin, which included testing, applying and adjusting thresholds, as well as further optimisation of the scripts
				to fully take advantage of Google Earth Engine capabilities, was supported by the SERVIR-Mekong project. This also included the addition of
				data from Landsat 4, 5 and 7. The development of the method to calculate the HAND dataset was fully supported by the eartH2Observe project,
				but the application for the Mekong, as well as refinement for this area, was supported by the SERVIR-Mekong project.</p>
				<p>Landsat data is made freely available by the U.S. Geological Survey (USGS) and is both accessed and processed in Google Earth Engine.</p>
				<p>The creation of the Google Appspot based online application was fully supported by the SERVIR-Mekong project.</p>
				<hr>
				<h1>References</h1>
				<p>Gennadii, D., Schellekens, J., Winsemius, H., Eisemann, E. & van de Giesen, N. (2016). A 30 m Resolution Surface Water
				Mask Including Estimation of Positional and Thematic Differences Using Landsat 8, SRTM and OpenStreetMap: A Case Study in the Murray-Darling
				Basin, Australia. <a href="http://www.mdpi.com/2072-4292/8/5/386" target="_blank" style="text-decoration:underline">Remote Sensing, 8(5), 386</a>
				.</p>
				<p>Rennó, C. D., Nobre, A. D., Cuartas, L. A., Soares, J. V., Hodnett, M. G., Tomasella, J., & Waterloo, M. J. (2008). HAND, a new terrain
				descriptor using SRTM-DEM: Mapping terra-firme rainforest environments in Amazonia.
				<a href="http://www.sciencedirect.com/science/article/pii/S003442570800120X" target="_blank" style="text-decoration:underline">
				Remote Sensing of Environment, 112(9), 3469-3481</a>.</P>
				<p>Xu, H. (2006). Modification of normalised difference water index (NDWI) to enhance open water features in remotely sensed imagery.
				International Journal of Remote Sensing, 27(14), 3025–3033.
				<a href="http://doi.org/10.1080/01431160600589179" target="_blank" style="text-decoration:underline">
				http://doi.org/10.1080/01431160600589179</a>.</P>
				<p>Yamazaki D., D. Ikeshima, R. Tawatari, T. Yamaguchi, F. O'Loughlin, J.C. Neal, C.C. Sampson, S. Kanae & P.D. Bates. (2017). A high accuracy
				map of global terrain elevations. Geophysical Research Letters, vol.44, pp.5844-5853. 
				<a href="http://onlinelibrary.wiley.com/doi/10.1002/2017GL072874/full" target="_blank" style="text-decoration:underline">
				doi: 10.1002/2017GL072874</a>.</p>
				<p>Landsat images courtesy of the USGS: <a href="https://landsat.usgs.gov/" target="_blank" style="text-decoration:underline">https://landsat.usgs.gov/</a></p>
				<p>MERIT DEM: <a href="http://hydro.iis.u-tokyo.ac.jp/~yamadai/MERIT_DEM/" target="_blank" style="text-decoration:underline">http://hydro.iis.u-tokyo.ac.jp/~yamadai/MERIT_DEM/</a></p>
			 </div>
	
			<!-- The DOM of the application. -->
			<div class="water">
					
				<!-- The element into which Google Maps is rendered. -->
				<div class="map"></div>
				
				<!-- The UI wrapper. -->
				<div class="ui">
					
					<!-- Button that opens the main control box after it has been collapsed -->
					<div class="settings-button">&#9776;</div>
					<script>
					$(document).ready(function(){
						$(".settings-button").click(function () {
							$(".settings-button").toggle();
							$(".panel").toggle();
						});
					});
					</script>
					
					<!-- The main control box. -->
					<div class="panel">

						<!-- Title, info button with general information text and collapse button. -->
						<header>
							<h1>
								<span id="tool-title">Surface Water Mapping Tool</span>
								<!-- collapse button for entire panel. -->
								<div class="collapse-button">&#187;</div>
								<script>
								$(document).ready(function(){
									$(".collapse-button").click(function () {
										$(".panel").toggle();
										$(".settings-button").toggle();
									});
								});
								</script>
								<!-- button that toggles display of general information -->
								<button class="general-info-button btn btn-default btn-xs pull-right">i</button>
								<script>
								$(".general-info-button").click(function () {
									$(".general-info").toggleClass("general-info-shown");
								});
								</script>
								<!-- General information panel -->
								<div class="general-info">
									<span>
									<b>Welcome to the SERVIR-Mekong Surface Water Mapping Tool.</b><br>
									This application allows you to carry out live calculations using a sophisticated water detection algorithm for the SERVIR-Mekong region.
									It is based on the algorithm described in <a href="http://www.mdpi.com/2072-4292/8/5/386" target="_blank" style="text-decoration:underline">this paper</a>.<br><br>
									You can change the time period over which results are calculated and download the results for a region of your choosing.
									If you are confident that you understand the implications, you can also check out the other options which give you greater control over the outcome of the algorithm.<br><br>
									Temporary water can, in certain cases, be seen as in indication of a flood. However, both permanent and temporary water are relative to the selected time period. For example,
									if a long time period is chosen (e.g. 10 years), temporary water does not necessarily indicate a flood has occurred there, but it does show that water was detected there 
									for some time within the selected period. To detect flooded water, it is advised to use a time period of 1 year or shorter.<br><br>
									Please note that, because everything is calculated on-the-fly, it might take some time for results to load.
									</span>
								</div>
							</h1>
						</header>
						
						<!-- Instructions -->
						<p class="instructions">
							Enter or select a time period to perform a new calculation.<br> Check out the documentation to learn more about the tool.
						</p>
						
						<hr>
						
						<!-- Map layers control (toggle layers, opacity) -->
						<div class="map-layers-control">
							<div class="map-layers-text">
								<span>Layers:</span>
							</div>
							<div class="map-layers">
								<!-- Active layers control (toggling / opacity) -->
								<div class="map-layers-value" id="map-layers-aoi">
									<div id="checkboxAoi">
										<input type="checkbox" value="None" id="checkbox-aoi" title="Show/hide layer" checked>
										<script>
										$('#checkbox-aoi').tooltip();
										</script>
									</div>
									<span>background</span>
									<input id="aoiControl" data-slider-id='aoiControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.6"/>
									<script>
									$('#aoiControl').slider({
										tooltip_position: 'top',
										formatter: function(value) {
											return 'Opacity: ' + value;
										}
									});
									</script>
								</div>
								<div class="map-layers-value" id="map-layers-hand">
									<div id="checkboxHAND">
										<input type="checkbox" value="None" id="checkbox-hand" title="Show/hide layer">
										<script>
										$('#checkbox-hand').tooltip();
										</script>
									</div>
									<span>HAND</span>
									<input id="handControl" data-slider-id='handControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0"/>
									<script>
									$('#handControl').slider({});
									</script>
								</div>
								<div class="map-layers-value" id="map-layers-water">
									<div id="checkboxWater">
										<input type="checkbox" value="None" id="checkbox-water" title="Show/hide layer" checked>
										<script>
										$('#checkbox-water').tooltip();
										</script>
									</div>
									<span>water</span>
									<input id="waterControl" data-slider-id='waterControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0"/>
									<script>
									$('#waterControl').slider({
										tooltip_position: 'bottom',
										formatter: function(value) {
											return 'Opacity: ' + value;
										}
									});
									</script>
								</div>
								<!-- Slider for months (climatology) -->
								<div class="months-slider">
									<span>Month:</span>
									<input id="monthsControl" data-slider-id='monthsControlSlider' type="text"/>
									<script>
									var monthsDict = {1:'1: Jan', 2:'2: Feb', 3:'3: Mar', 4:'4: Apr', 5:'5: May', 6:'6: Jun', 7:'7: Jul', 8:'8: Aug', 9:'9: Sep', 10:'10: Oct', 11:'11: Nov', 12:'12: Dec'};
									$('#monthsControl').slider({
										min: 1, max: 12, value: 1, step: 1, orientation: 'horizontal', tooltip_position: 'bottom',
										formatter: function(value) {
											return monthsDict[value];
										}
									});
									</script>
								</div>
							</div>
						</div>
						
						<hr>
						
						<!-- Controls -->
						<div class="controls">
							
							<div class="inputs">
								
								<!-- Date selection -->
								<div class="input-block date">
									<div class="input-block-label">Period:</div>
									<input class="date-picker form-control">
									<span class="period_slice">-</span>
									<input class="date-picker-2 form-control">
								</div>
								
								<!-- Expert controls -->
								<div class="expert-toggle">
									<div class="expert-message">
										<button class="expert btn btn-default btn-xs">Show more options</button>
										<script>
											$(".expert").click(function () {
												$(this).text(function(i, v){
												   return v === 'Show more options' ? 'Hide more options' : 'Show more options'
												})
												$(".expert-input").toggle();
											});
										</script>
									</div>
								</div>
								<div class="expert-input">
									<div class="input-block climatology">
										<span class="expert-input-block-label">Show months:</span>
										<input type="checkbox" class="climatology-input">
										<button class="climatology-info-button btn btn-default btn-xs">i</button>
										<div class="climatology-info">
											<span>
											Instead of a single map, this will show results for each individual month. This makes it possible to detect monthly trends. 
											Since this substantially reduces the total amount of images within each map, this does require a longer time period. Instead of 
											the usual 90 days minimum, the minimum time period when climatology is activated is 3 years. Even so, it is still possible that 
											a certain month will not have sufficient satellite coverage to show accurate information over the entire area. 
											Since 12 maps are calculated instead of 1, this can also slow down the application a lot. Please consider these things when activating this option.<br><br>
											When activated, a slider for the different months will appear at the layers control section.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".climatology-info-button").click(function () {
											$(".climatology-info").toggleClass("climatology-info-shown");
											//$(".climatology-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block defringe">
										<span class="expert-input-block-label">Defringe images:</span>
										<input type="checkbox" class="defringe-input">
										<button class="defringe-info-button btn btn-default btn-xs">i</button>
										<div class="defringe-info">
											<span>
											Some Landsat satellite images contain noise due to sensor failures. See the following page for background information: 
											<a href="http://landsat.usgs.gov/products_slcoffbackground.php" target="_blank" style="text-decoration:underline">http://landsat.usgs.gov/</a>.
											The defringe algorithm attemps to mask out the pixels where sensor failures are an issue, reducing noise in the final result. However, due to the masking involved, 
											this does result in less water being detected (especially temporary water), as it reduces the total amount of information. It is therefore important to consider what is most relevant; 
											reducing the noise (apply defringing) or maintaining as much information from the data as possible (do not apply defringing). Since defringing requires additional steps in the calculation, 
											it delays the visualization of results slightly.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".defringe-info-button").click(function () {
											$(".defringe-info").toggleClass("defringe-info-shown");
											//$(".defringe-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block percentile">
										<span class="expert-input-block-label">Percentiles:</span>
										<input type="number" min="0" max="100" name="percentile" class="percentile-input-perm form-control">
										<input type="number" min="0" max="100" name="percentile" class="percentile-input-temp form-control">
										<button class="percentile-info-button btn btn-default btn-xs">i</button>
										<div class="percentile-info">
											<span>
											The percentile value controls the how the complete stack of satellite images is reduced to a single image (see 
											<a href="https://developers.google.com/earth-engine/reducers_image_collection" target="_blank" style="text-decoration:underline">GEE documentation</a>
											for more info on this). This parameter can take a value between 0 and 100, but in the lower ranges the effect of shadows will deteriorate results, while clouds will do the same in the higher ranges. 
											The value on the left is used to calculate permanent water, the value on the right for temporary water. The value for permanent water should always exceed the one for temporary water.
											For permanent water, it is recommended to stay within the range of 15 - 60. For temporary water, it is recommended to stay within the range of 5 - 15.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".percentile-info-button").click(function () {
											$(".percentile-info").toggleClass("percentile-info-shown");
											//$(".percentile-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block water-threshold">
										<span class="expert-input-block-label">Water threshold:</span>
										<input type="number" min="-1" max="1" step="0.05" name="water-threshold" class="water-threshold-input form-control">
										<button class="water-threshold-info-button btn btn-default btn-xs">i</button>
										<div class="water-threshold-info">
											<span>
											The water threshold value controls when something is classified as water from the Modified Normalized Difference Water Index (MNDWI). For more information on MNDWI,
											check out the relevant paper by <a href="http://www.tandfonline.com/doi/abs/10.1080/01431160600589179" target="_blank" style="text-decoration:underline">Xu (2006)</a>. The parameter can take a value 
											between -1 and 1, with lower values resulting in more areas identified as being water. However, it is recommended to stay within the range of 0.0 - 0.4.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".water-threshold-info-button").click(function () {
											$(".water-threshold-info").toggleClass("water-threshold-info-shown");
											//$(".water-threshold-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block veg-threshold">
										<span class="expert-input-block-label">Vegetation threshold:</span>
										<input type="number" min="-1" max="1" step="0.05" name="veg-threshold" class="veg-threshold-input form-control">
										<button class="veg-threshold-info-button btn btn-default btn-xs">i</button>
										<div class="veg-threshold-info">
											<span>
											The vegetation threshold value controls when something is classified as vegetation, which is used to mask out false-positives from the water detection algorithm. 
											The latter especially occurs in areas with dark vegetation. This uses the Normalized Difference Vegetation Index (NDVI), which is often used to study vegetation.<br>
											A little background information on NDVI can be found, amongst others, at <a href="https://en.wikipedia.org/wiki/Normalized_Difference_Vegetation_Index" target="_blank" style="text-decoration:underline">Wikipedia</a>.
											The parameter can take a value between -1 and 1, but it is recommended to stay within the range of 0.2 - 0.6.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".veg-threshold-info-button").click(function () {
											$(".veg-threshold-info").toggleClass("veg-threshold-info-shown");
											//$(".veg-threshold-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block hand-threshold">
										<span class="expert-input-block-label">HAND threshold:</span>
										<input type="number" min="0" max="9999" step="1" name="hand-threshold" class="hand-threshold-input form-control">
										<button class="hand-threshold-info-button btn btn-default btn-xs">i</button>
										<div class="hand-threshold-info">
											<span>
											HAND (Height Above Nearest Drainage) is a method to normalize land elevation values relative to streams. For more information about HAND see the relevant papers by
											<a href="http://www.sciencedirect.com/science/article/pii/S003442570800120X" target="_blank" style="text-decoration:underline">Renn&#243 et al. (2008)</a> and 
											<a href="http://www.sciencedirect.com/science/article/pii/S0022169411002599" target="_blank" style="text-decoration:underline">Nobre et al. (2011)</a>. This makes it possible to use a single value 
											to mask out false-positives related to elevation, such as hill shades (these can appear similar to water in the processed satellite images). The parameter can take 
											a value between 0 and 9999 meter. It is recommended to choose a value of at least 10 meter.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".hand-threshold-info-button").click(function () {
											$(".hand-threshold-info").toggleClass("hand-threshold-info-shown");
											//$(".hand-threshold-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
									<div class="input-block cloud-threshold">
										<span class="expert-input-block-label">Clouds threshold:</span>
										<input type="number" min="-1" max="100" step="1" name="cloud-threshold" class="cloud-threshold-input form-control">
										<button class="cloud-threshold-info-button btn btn-default btn-xs">i</button>
										<div class="cloud-threshold-info">
											<span>
											The cloud threshold value controls when something is classified as a cloud, which will subsequently be removed from the analysis. This is done to reduce the impact of clouds on the algorithm.
											The parameter can take a value between 0 and 100, or be turned off completely, by setting it to -1 (default). This parameter an effect on the percentile calculation, as cloud masking is carried out before that step. 
											As such, changes in this parameter could permit the use of a different percentile value, and vice versa.
											</span>
										</div>
										<!-- toggle the info panel and make sure that it is not shown outside the screen -->
										<script>
										$(".cloud-threshold-info-button").click(function () {
											$(".cloud-threshold-info").toggleClass("cloud-threshold-info-shown");
											//$(".cloud-threshold-info-shown").css("top", $(".expert-input").position().top);
										});
										</script>
									</div>
								</div>
								<div class="reset-button">
									<button class="expert-reset btn btn-primary">Reset controls</button>
									<button class="submit btn btn-primary">Update map</button>
									<script>
									$(".expert-reset").click(function () {
										water.App.prototype.setDefaultParams();
									});
									</script>
								</div>
								
								<hr>
								
								<!-- Region selection -->
								<div class="input-block region">
									<div class="input-block-label">Region:</div>
									<ul>
										<li><input type="radio" name="polygon-selection-method" value="Adm. bounds" id="polygon-selection-method"><label>Adm. bounds</label></li>
										<li><input type="radio" name="polygon-selection-method" value="Tiles" id="polygon-selection-method"><label>Tiles</label></li>
										<li><input type="radio" name="polygon-selection-method" value="Draw polygon" id="polygon-selection-method"><label>Draw polygon</label></li>
									</ul>
									<span class="message">
										<a class="draw" href="#"></a>
									</span>
									<span class="message-drawing">
										<button class="cancel btn btn-default btn-xs">Cancel</button>
									</span>
									<span class="message-selected">
										<button class="clear btn btn-default btn-xs">Clear</button>
									</span>
								</div>
								
								<!-- Exporting -->
								<div class="input-block">
									<span class="input-block-label">Filename:</span>
									<input type="text" name="filename" class="filename form-control"
										   placeholder="default: <SWMT_period>">
									<button class="export btn btn-primary" disabled>Export</button>
									<button class="export-info-button btn btn-default btn-xs">i</button>
									<div class="export-info">
										<span>
										Exporting results is enabled once you have selected a region (or completed drawing a polygon) on the map. This is done by 
										first choosing a region selection method above. This will either load a new map layer from which you can select one ore more
										areas, or it will allow you to draw a polygon on the map yourself. Since this accesses the same database as the other map layers
										it is advised to wait for those to load before making a region selection.<br><br>
										You can select multiple areas (up to a maximum of four) by holding down the Ctrl key. Pressing the Esc key will reset the region selection.<br><br>
										Optionally, a filename for the to-be-downloaded data can be entered. If omitted, a default filename will be constructed using the selected time period.<br><br>
										Clicking the Export button reveals a panel on the top left of the screen. Download links will be shown there once they are ready for use. Map (water) layers are
										downloaded as zipped GeoTIFF files (0=no water, 1=temporary water, 2=permanent water). Metadata with input parameters can be downloaded directly as a CSV file.<br><br>
										<b>NOTE:</b> Due to limitations with the current implementation of the download option, there is a constraint on the size of the area that can be downloaded.
										You will see a warning if the area you have selected or drawn is too big. Near the limit there is a possibility that you receive a corrupted zip file. In that case, 
										simply delete it and retry the download. We are working on a better implementation of the download option, which will remove all area constraints and other issues.
										</span>
									</div>
									<!-- toggle the export info panel -->
									<script>
									$(".export-info-button").click(function () {
										$(".export-info").toggleClass("export-info-shown");
									});
									</script>
								</div>
							</div>
						</div>

					</div>
					
					<!-- scrollbar for entire panel -->
					<script>
					$(document).ready(function() {
						$(".panel").css("max-height", ($(document).height()-parseInt($(".ui").css('top'), 10))-160);
					});
					</script>
					
				</div>
				
				<!-- Legend (legend border was used in demo, can be removed!) -->
				<div class="legend">
					<div class="legend-text">
						<span>Legend</span>
						<button class="legend-info-button btn btn-default btn-xs">i</button>
						<div class="legend-info">
							<span>
							The legend clarifies the map layers. You can toggle between the water legend and HAND legend by clicking on their respective tabs.
							The visualization of the layers themselves are handled in the control panel on the right.
							</span>
						</div>
						<script>
						$(".legend-info-button").click(function () {
							$(".legend-info").toggleClass("legend-info-shown");
						});
						</script>
					</div>
					<div class="legend-tabs">
						<button class="legend-tab" id="legend-tab-default" onClick="openLegendTab(event, 'water')">Water</button>
						<button class="legend-tab" onClick="openLegendTab(event, 'hand')">HAND</button>
					</div>
					<div class="legend-line"></div>
					<div id="legend-tab-water" class="legend-tab-content">
						<div class="legend-value" id="legend-water-perm">
							<div class="legend-block" style="background-color: #00008b;"></div>
							<span>Permanent</span>
						</div>
						<div class="legend-value" id="legend-water-temp">
							<div class="legend-block" style="background-color: #9999ff;"></div>
							<span>Temporary</span>
						</div>
					</div>
					<div id="legend-tab-hand" class="legend-tab-content">
						<div class="legend-value" id="legend-hand-0">
							<div class="legend-block" style="background-color: #3288bd;"></div>
							<span>0 m</span>
						</div>
						<div class="legend-value" id="legend-hand-1">
							<div class="legend-block" style="background-color: #99d594;"></div>
							<span>20 m</span>
						</div>
						<div class="legend-value" id="legend-hand-2">
							<div class="legend-block" style="background-color: #e6f598;"></div>
							<span>40 m</span>
						</div>
						<div class="legend-value" id="legend-hand-3">
							<div class="legend-block" style="background-color: #fc8d59;"></div>
							<span>60 m</span>
						</div>
						<div class="legend-value" id="legend-hand-4">
							<div class="legend-block" style="background-color: #d53e4f;"></div>
							<span>80 m</span>
						</div>
						<div class="legend-value" id="legend-hand-5">
							<div class="legend-block" style="background-color: #ffffff;"></div>
							<span>100+ m</span>
						</div>
					</div>
					<script>
					function openLegendTab(event, name) {
						tabcontent = document.getElementsByClassName("legend-tab-content");
						for (i = 0; i < tabcontent.length; i++) {
							tabcontent[i].style.display = "none";
						}
						tablinks = document.getElementsByClassName("legend-tab");
						for (i = 0; i < tablinks.length; i++) {
							tablinks[i].className = tablinks[i].className.replace(" active", "");
						}
						document.getElementById('legend-tab-' + name).style.display = "block";
						event.currentTarget.className += " active";
					}
					$(document).ready(function() {
						document.getElementById("legend-tab-default").click();
					});
					</script>
				</div>
				
				<!-- Warning messages placeholder -->
				<div class="warnings">
					<span></span>
				</div>
				
				<!-- Download link(s) panel -->
				<div class="download_panel">
					<div id="download_prep">
						<span>Preparing download link(s)...</span>
					</div>
					<a id="link1" target="_blank">Click here to download water layer</a>
					<a id="link2" target="_blank">Click here to download water layer (2)</a>
					<a id="link3" target="_blank">Click here to download water layer (3)</a>
					<a id="link4" target="_blank">Click here to download water layer (4)</a>
					<a id="link_metadata" target="_blank">Click here to download metadata</a>
				</div>
				
				<!-- spinner is shown during calculations -->
				<div class="spinner"></div>	
				
			</div>
		</section>

		
		<!-- Footer -->
		<section id="pagefooter">
			<div class="logos">
			   <a href="https://www.deltares.nl/en/" target="_blank"><img id="deltares" src="static/images/deltares_tr.png"  alt="DELTARES"></a>
			   <a href="http://sig-gis.com/" target="_blank"><img id="sig" src="/static/images/sig_tr.png" alt="SIG">
			   <a href="https://www.sei-international.org/asia" target="_blank"><img id="sei" src="/static/images/sei_tr.png" alt="SEI">
			   <a href="https://earthengine.google.com/" target="_blank"><img id="gee" src="static/images/google_earthengine_powered_400px.png" alt="GEE"></a>
			</div>
		</section>
		
		
		<!-- Google Analytics -->
		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-101791952-1', 'auto');
		  ga('send', 'pageview');

		</script>

		
		<!-- Boot application once the body loads. -->
		<script>
			water.boot();
		</script>
		
	</body>
</html>